<template>
  <div >
        <!-- v-hasC="{ name: 'rbac-module-create', flag: 'v1/rbac/module/create' }" -->
    <Button
      type="primary"
      icon="md-add"
      @click="handleOpenCreate"
      >新建</Button
    >
    <Table highlight-row
      ref="table"
      :columns="columns"
      :data="list"
      :loading="loading"
      class="ivu-mt"
    >
      <template slot-scope="{ row }" slot="status">
        <Badge v-if="row.status === '1'" status="success" text="启用" />
        <Badge v-if="row.status === '0'" status="error" text="禁用" />
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <a

          @click="handleUpdate(row, index)"
          >编辑</a
        >
         <!-- v-hasC="{ name: 'rbac-module-update', flag: 'v1/rbac/module/update' }" -->
      </template>
    </Table>
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="total"
        :current.sync="current"
        show-total
        show-elevator
        :page-size="size"
        @on-change="handleChangeSize"
        :page-size-opts="pageOpts"
        show-sizer
        @on-page-size-change="changePageSize"
      />
    </div>
    <Modal
      v-model="showCreate"
      :title="title"
      :mask-closable="false"
      :loading="creating"
      @on-ok="handleCreate"
    >
      <Form
        ref="create"
        :model="createMenuData"
        :rules="createRules"
        :label-width="100"
      >
        <FormItem label="模块名称：" prop="name">
          <Input
            v-model="createMenuData.name"
            placeholder="请输入模块名称"
            clearable
          />
        </FormItem>
        <FormItem label="模块链接：" prop="url">
          <Input
            v-model="createMenuData.url"
            placeholder="请输入模块链接"
            clearable
          />
        </FormItem>
        <FormItem label="模块Icon：" prop="class_style">
          <Input
            v-model="createMenuData.class_style"
            placeholder="请输入Icon类名"
            clearable
          />
        </FormItem>
        <FormItem label="排序：" prop="sort">
          <Input v-model="createMenuData.sort" placeholder="请输入排序大小" />
        </FormItem>
        <FormItem label="模块状态：">
          <Switch v-model="createMenuData.status" size="large">
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
          </Switch>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
    // import {
    //     GetModuleList,
    //     CreateModuleMenu,
    //     updateModuleMenu
    // } from '@/api/TApi/index.js';
    import {
        rbacmodulelist,
        rbacactioninfo,
        rbacmodulecreate,
        rbacmoduleupdate
    } from '@/api/power.js';
    export default {
        data () {
            return {
                columns: [
                    {
                        title: '模块名称',
                        key: 'name',
                        minWidth: 100
                    },
                    {
                        title: '模块Icon',
                        key: 'class_style',
                        minWidth: 160
                    },
                    {
                        title: 'url路径',
                        key: 'url',
                        minWidth: 140
                    },
                    {
                        title: '排序',
                        key: 'sort',
                        minWidth: 50
                    },
                    {
                        title: '状态',
                        slot: 'status',
                        minWidth: 60
                    },
                    {
                        title: '创建时间',
                        key: 'created_at_str',
                        minWidth: 140
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                        minWidth: 80
                    }
                ],
                loading: false,
                list: [],
                pageOpts: [10, 20, 30, 50],
                moduleList: [],
                parentMenuList: [],
                current: 1,
                size: 10,
                total: 0,
                showCreate: false,
                createMenuData: {
                    name: '',
                    url: '',
                    parent_menu_id: '',
                    module_id: '',
                    class_style: '',
                    status: true,
                    sort: ''
                },
                createRules: {
                    name: [{ required: true, message: '请输入模块名称', trigger: 'blur' }],
                    url: [{ required: true, message: '请输入模块连接', trigger: 'blur' }],
                    class_style: [
                        { required: true, message: '请输入icon', trigger: 'blur' }
                    ],
                    sort: [
                        {
                            message: '排序必须是正数',
                            pattern: /^[+]{0,1}(\d+)$/,
                            trigger: 'blur'
                        }
                    ],
                    module_id: [{ required: true, message: '请选择模块', trigger: 'blur' }],
                    status: [
                        { required: true, message: '请输入模块状态', trigger: 'blur' }
                    ]
                },
                creating: true,
                updateIndex: -1,
                editing: true,
                title: '新增'
            };
        },
        methods: {
            getData () {
                this.loading = true;
                rbacmodulelist({
                    pageSize: this.size,
                    page: this.current
                })
                    .then((res) => {
                        this.list = res.list;
                        this.total = res.total;
                    })
                    .finally(() => {
                        this.loading = false;
                });
            },
            // 获取父级模块
            // getParentMenuList (moduleId) {
            //     GetParentMenus({ id: moduleId }).then((res) => {
            //         this.parentMenuList = res.menu_list;
            //     });
            // },
            // handleSelectModule (value) {
            //     // 选中模块
            //     if (!value) return false;
            //     this.getParentMenuList(value);
            // },
            // 点击切换分页
            handleChangeSize (currentPage) {
                this.current = currentPage;
                this.getData();
            },
            changePageSize (e) {
                this.size = e;
                this.getData();
            },
            // 切换状态
            handlechangeType (id, type) {
                this.$Modal.confirm({
                    title: '警告',
                    content: '是否确认' + (type === 1 ? '开启' : '关闭') + '该模块？',
                    onOk: () => {
                        ChangeTypeMenu({
                            id: id,
                            status: type
                        }).then(() => {
                            this.getData();
                            this.$Message.success('修改成功');
                        });
                    }
                });
            },
            // 点击新增
            handleOpenCreate () {
                this.updateIndex = -1;
                this.showCreate = true;
                this.title = '新增';
                this.$nextTick(() => {
                    this.$refs['create'].resetFields();
                });
                this.createMenuData.status = true
                // this.getParentMenuList(0);
            },
            // 新增数据
            handleCreate () {
                this.$refs.create.validate((valid) => {
                    if (valid) {
                        let sendData = JSON.parse(JSON.stringify(this.createMenuData));
                        sendData.status = sendData.status === true ? '1' : '0';
                        delete sendData.module_id;
                        delete sendData.parent_menu_id;
                        if (this.updateIndex < 0) {
                            // 新建
                            rbacmodulecreate(sendData).then((res) => {
                                // 创建模块成功后，刷新页面
                                this.showCreate = false;
                                this.getData();
                                this.$Message.success('创建模块成功');
                            });
                        } else {
                            // 修改
                            rbacmoduleupdate(sendData).then((res) => {
                                // 修改模块成功后，刷新页面
                                this.showCreate = false;
                                this.getData();
                                this.$Message.success('修改成功');
                            });
                        }
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    } else {
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    }
                });
            },
            // 编辑数据
            handleUpdate (data, index) {
                this.showCreate = true;
                this.updateIndex = index;
                this.title = '编辑';
                for (let key in this.createMenuData) {
                    this.createMenuData[key] = data[key];
                }
                this.createMenuData.status = this.createMenuData.status === '1';
                this.createMenuData.id = data.id;
            }
        }
    };
</script>
